<template>
  <div>
    <van-index-bar>
      <!-- 使用 v-for 动态渲染 van-index-anchor 和 van-cell -->
      <template v-for="(group, index) in groupedData">
        <van-index-anchor :index="group.index" :key="`anchor-${index}`" />
        <van-cell
            v-for="(item, itemIndex) in group.items"
            :title="item.title"
            :key="`cell-${index}-${itemIndex}`"
        />
      </template>
    </van-index-bar>
  </div>
</template>

<script>
import axios from 'axios';

export default {
  data() {
    return {
      groupedData: [] // 存储处理后的数据
    };
  },
  mounted() {
    this.fetchData();
  },
  methods: {
    async fetchData() {
      try {
        // 发送异步请求获取后端数据
        const response = await axios.get(`http://localhost:10086/api/user/region/findAll`);
        const data = response.data;

        // 假设后端返回的数据格式为数组，每个元素包含 index 和 items 字段
        this.groupedData = data;

      } catch (error) {
        console.error('获取数据失败:', error);
      }
    }
  },
  created() {
    const token = JSON.parse(localStorage.getItem("token"));
    if (!token) {
      this.$message.error('请先登录');
      setTimeout(() => {
        this.$router.push({name: 'login'});
      }, 666);
    }
    // 设置全局默认请求头
    this.axios.defaults.headers.common['token'] = token;
  },
};
</script>

<style scoped>
/* 可以添加一些自定义样式 */
</style>